<!--
 * @Author: lujiangbo knight_lujb@163.com
 * @Date: 2024-04-11 14:58:18
 * @LastEditors: lujiangbo knight_lujb@163.com
 * @LastEditTime: 2024-10-21 21:59:28
 * @FilePath: /character-test/src/pages/components/CustomNav/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="chat-container">
    <div class="icon-box">
      <img :src="props.itemData.avatar || markIconUrl" style="width: 100%;height: 100%;" alt="">
    </div>
    <div>
      <div class="nickname-box">{{ props.itemData.userName }}</div>
      <div v-if="`${props.itemData.type}` === '2'" class="message-box">{{ props.itemData.content }}</div>
      <div v-if="`${props.itemData.type}` === '1'" @click="() => {
        if (props.itemData.isReceived) return;
        picketClicked(itemData)
      }">
        <img v-if="props.itemData.isReceived" class="packet-box" :src="icon_fa" alt="">
        <img v-else class="packet-box" :src="icon_f9" alt="">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="CustomItemChat">
import icon_fa from '@/assets/image/fa.webp'
import icon_f9 from '@/assets/image/f9.webp'
import { ItemChatProps } from '../../type';
const emits = defineEmits(['picketClick'])
const props = defineProps<{
  itemData: ItemChatProps
}>()
const picketClicked = (item: any) => {
  const targetItem = { ...item }
  if (!targetItem.avatar) {
    targetItem.avatar = markIconUrl
  }
  emits('picketClick', { targetItem })
}

const generateRandomNumber = () => {
  return Math.floor(Math.random() * 99) + 1;
}
const markIconUrl: string = `https://dituioss.jinshanju.com/pg/luckmoney-in-chatroom/avatar/${generateRandomNumber()}.jpg`

</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;

  .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 8px;
  }

  .nickname-box {
    font-size: 14px;
    color: #272528;
    margin-bottom: 5px;
  }

  .message-box {
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    padding: 8px 5px;
    font-size: 12px;
    max-width: 200px;
    color: #72706f;
    line-height: 18px;
  }

  .message-box::after,
  .message-box::before {
    content: '';
    position: absolute;
    top: 5px;
    /* 位于对话框的顶部 */
    left: -7px;
    /* 三角形的左侧位置 */
    border-width: 5px;
    /* 三角形的大小 */
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    /* 上边框颜色为对话框背景色，其余为透明 */
  }

  .message-box::before {
    left: -7px;
    border-color: transparent #ccc transparent transparent;
    /* 上边框颜色为对话框边框颜色，其余为透明 */
    z-index: -1;
    /* 使三角形的阴影部分被背景色遮挡 */
  }

  .packet-box {
    width: 200px;
  }
}
</style>